<template>
  <div>
    <el-card class="box-card" style="width: 240px;" :style="{height: tabHt+'px'}">
      <div :style="{height: (tabHt-40)+'px'}">
        <el-scrollbar style="height: 100%;">

          <el-checkbox-group v-model="collectPointIds" >
            <el-checkbox v-for="(collectPoint, index) in collectPointList" :key="collectPoint.id"
                         :label="collectPoint.id" style="margin-top:5px;margin-bottom: 5px;width: 100%;" class="checkItem" >{{collectPoint.name }}</el-checkbox>
          </el-checkbox-group>

        </el-scrollbar>
      </div>
    </el-card>
  </div>
</template>

<script>
  import { selectCollectPoints } from "@/api/basic/collectPoint";

export default {
  name: "PointListMore",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 测点管理表格数据
      collectPointList: [],
      collectPointIds:[],
      pointId : undefined,
      pointName:undefined,
      key:null
    };
  },
  computed: {
    tabHt(){
      return this.$store.state.app.tableHeight.pointHt
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getPointIds(){
      return this.collectPointIds;
    },
    /** 查询监测站点管理列表 */
    getList() {
      selectCollectPoints().then(response => {
        this.collectPointList = response;
      });
    }
  }
};
</script>

<style scoped lang="scss">
  .box-card ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
</style>
